<!DOCTYPE html>
<html lang="en">
	<head>
		<title>模型展示</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<style>
			body {
				font-family: Monospace;
				background-color: rgba(0,0,0,0);
				color: #fff;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				border: none;
				cursor: default;
			}

			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display: block;
			}

			#info a {
				color: #f00;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}

			#glFullscreen {
				width: 100%;
				height: 100vh;
				min-width: 375px;
				min-height: 360px;
				position: relative;
				overflow: hidden;
				z-index: 0;
			}

			#example {
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: #000000;
			}

			#feedback {
				color: darkorange;
			}

			#dat {
				user-selectleft: none;
				position: absolute;
				left: 0;
				top: 0;
				z-Index: 200;
			}
			li{
				list-style: none;
			}
			.lightbox{
				position: fixed;
				top: 0px;
				left: 0px;
				z-index: 9999;
				width: 350px;
			}
			.chagebtn{
				display: inline-block;
				padding: 4px;
				background-color: #f99;
			}
			.lightbox ul{
				margin: 0;
				padding: 0;
				text-align: left;
				display: none;
			}
			.lightbox ul li{
				padding: 4px 10px;
				border: 1px solid #ddd;
				margin: 0;
				overflow: hidden;
			}
			.lightbox ul li input{
				width: 40px;
				text-align: center;
				float: right;
			}
			.lightbox ul li input.range{
				width: 250px;
				display: inline-block;
			}
		</style>

	</head>

	<body>
		<div class="lightbox">
			<div class="chagebtn" onclick="chageboxfn()">光源设置</div>
			<button type="button" onclick="hairstylefn(1)">发型1</button>
			<button type="button" onclick="hairstylefn(2)">发型2</button>
			<button type="button" onclick="hairstylefn(3)">发型3</button>
			<button type="button" onclick="hairstylefn(4)">发型4</button>
			<button type="button" onclick="hairstylefn(5)">发型5</button>
			<ul id="lightul">
				<!--<li>
					<span>颜色</span>
					<input type="color" name="" id="lightColor" value="" oninput="lightColorfn()" />
				</li> -->
				<li>
					<span>左右位置:</span>
					<input class="range" type="range" max="500" min="-500" name="" id="lightX" value="300" oninput="lightfn()" />
				</li>
				<li>
					<span>上下位置:</span>
					<input class="range" type="range" max="500" min="-500" name="" id="lightY" value="100" oninput="lightfn()" />
				</li>
				<li>
					<span>前后距离:</span>
					<input class="range" type="range" max="500" min="-500" name="" id="lightZ" value="150" oninput="lightfn()" />
				</li>
				<li>
					<span>强度:</span>
					<input class="range" type="range" max="10" min="0" name="" id="lightIntensity" value="1" oninput="lightfn()" />
				</li>
			</ul>
		</div>
		<div id="glFullscreen"><canvas id="example"></canvas></div>
		<div id="dat"></div>
		<div id="info">
			<div id="feedback"></div>
		</div>

		<script src="./build/three.min.js"></script>
		<script src="js/controls/TrackballControls.js"></script>
		<script src="js/loaders/MTLLoader.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>
		<script src="js/loaders/LoaderSupport.js"></script>
		<script src="js/loaders/OBJLoader2.js"></script>
		<script>
			// 'use strict';

			// 获取光源相关信息
			let lightXvalue = document.getElementById("lightX").value
			let lightYvalue = document.getElementById("lightY").value
			let lightZvalue = document.getElementById("lightZ").value
			let lightIntensity = document.getElementById("lightIntensity").value


			var directionalLight1 // 定义光的变量
			var lightchage = true // 光当前是否可以改变
			let objLoader, objLoader1, objLoader2 //定义模型
			var callbackOnLoad //模型加载时参数
			let hairstyle = [{
					url: './obj/obj2/',
					name: 'Tails',
					obj: 0,
					position:[0,70,0]
				},{
					url: './obj/walt/',
					name: 'WaltHead',
					obj: 0,
					position:[0,65,0]
				},{
					url: './obj/man/',
					name: 'male02',
					obj: 0,
					position:[40,-100,0]
				},
				// {
				// 	url: './obj/obj3/',
				// 	name: 'niaolong',
				// 	obj: 0,
				// 	position:[0,75,0]
				// }
			]

			var OBJLoader2Example = function(elementToBindTo) {
				this.renderer = null;
				this.canvas = elementToBindTo;
				this.aspectRatio = 1;
				this.recalcAspectRatio();

				this.scene = null;
				this.cameraDefaults = {
					posCamera: new THREE.Vector3(0.0, 0.0, 300.0), //相机拍摄角度
					posCameraTarget: new THREE.Vector3(0, 0, 100.0),
					near: 0.1,
					far: 800,
					fov: 50
				};
				this.camera = null;
				this.cameraTarget = this.cameraDefaults.posCameraTarget;

				this.controls = null;
			};

			OBJLoader2Example.prototype = {

				constructor: OBJLoader2Example,

				initGL: function() {
					//渲染器
					this.renderer = new THREE.WebGLRenderer({
						canvas: this.canvas,
						antialias: true,
						autoClear: true
					});
					//画布颜色
					this.renderer.setClearColor(0x339999);
					// 创建场景对象 Scene
					this.scene = new THREE.Scene();
					// 创建网格模型
					this.camera = new THREE.PerspectiveCamera(this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near,
						this.cameraDefaults.far);
					this.resetCamera();
					this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);

					var ambientLight = new THREE.AmbientLight(0x404040); //环境光颜色
					directionalLight1 = new THREE.PointLight(0xffffff); //光源颜色
					directionalLight1.position.set(lightXvalue, lightYvalue, lightZvalue); // 光位置
					this.scene.add(directionalLight1); //光源添加到场景中
					this.scene.add(ambientLight);
					// 网格辅助线：网格宽度、等分数、中心线颜色，网格线颜色
					var helper = new THREE.GridHelper(1200, 12, 0xFF4444, 0x404040);
					helper.position.set(0, -100, 0);
					this.scene.add(helper);
				},

				initContent: function() {
					// 加载时显示的文字
					var modelName = '加载模型中';
					this._reportProgress({
						detail: {
							text: 'Loading: ' + modelName
						}
					});

					var scope = this;

					callbackOnLoad = function(event) {
						scope.scene.add(event.detail.loaderRootNode);
						console.log('Loading complete: ' + event.detail.modelName);
						scope._reportProgress({
							detail: {
								text: ''
							}
						});
					};

					// 人物模型
					objLoader = new THREE.OBJLoader2(); //在init函数中，创建loader变量，用于导入模型
					var onLoadMtl = function(materials) {
						objLoader.setModelName(modelName);
						objLoader.setMaterials(materials);
						objLoader.setLogging(true, true);
						//第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中
						objLoader.load('./obj/obj/02.obj', callbackOnLoad, null, null, null, false);
						objLoader.loaderRootNode.position.set(0, -100, 0)
					};
					objLoader.loadMtl('./obj/obj/02.mtl', null, onLoadMtl);

					// 循环遍历加载发型模型
					for (var i = 0; i < hairstyle.length; i++) {
						addObjfn(i, hairstyle[i].url, hairstyle[i].name)
						console.log(hairstyle[i])
					}

				},

				// 设置画布
				_reportProgress: function(event) {
					var output = THREE.LoaderSupport.Validator.verifyInput(event.detail.text, '');
					console.log('Progress: ' + output);
					document.getElementById('feedback').innerHTML = output;
				},

				resizeDisplayGL: function() {
					this.controls.handleResize();

					this.recalcAspectRatio();
					this.renderer.setSize(this.canvas.offsetWidth, this.canvas.offsetHeight, false);

					this.updateCamera();
				},

				recalcAspectRatio: function() {
					this.aspectRatio = (this.canvas.offsetHeight === 0) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
				},

				resetCamera: function() {
					this.camera.position.copy(this.cameraDefaults.posCamera);
					this.cameraTarget.copy(this.cameraDefaults.posCameraTarget);

					this.updateCamera();
				},

				updateCamera: function() {
					this.camera.aspect = this.aspectRatio;
					this.camera.lookAt(this.cameraTarget); //lookAt()设置相机所看的位置
					this.camera.updateProjectionMatrix();
				},
				// 渲染函数
				render: function() {
					if (!this.renderer.autoClear) this.renderer.clear();
					this.controls.update();
					this.renderer.render(this.scene, this.camera);
				}

			};

			var app = new OBJLoader2Example(document.getElementById('example'));

			var resizeWindow = function() {
				app.resizeDisplayGL();
			};

			var render = function() {
				requestAnimationFrame(render);
				app.render();
			};

			window.addEventListener('resize', resizeWindow, false);

			console.log('Starting initialisation phase...');
			app.initGL();
			app.resizeDisplayGL();
			app.initContent();

			render();

			// 创建添加模型
			function addObjfn(index, url, name) {
				hairstyle[index].obj = new THREE.OBJLoader2();
				var onLoadMtl = function(materials) {
					hairstyle[index].obj.setModelName(name);
					hairstyle[index].obj.setMaterials(materials);
					hairstyle[index].obj.setLogging(true, true);
					hairstyle[index].obj.load(url + name + '.obj', callbackOnLoad, null, null, null, false);
					hairstyle[index].obj.loaderRootNode.position.set(0, 0, -10000)
				};
				hairstyle[index].obj.loadMtl(url + name + '.mtl', null, onLoadMtl);
			}

			// 十六进制转十进制
			function numfn(a, b) {
				let numduizhao = {
					1: 1,
					2: 2,
					3: 3,
					4: 4,
					5: 5,
					6: 6,
					7: 7,
					8: 8,
					9: 9,
					a: 10,
					b: 11,
					c: 12,
					d: 13,
					e: 14,
					f: 15
				}
				return numduizhao[a] * 16 + numduizhao[b]
			}
			// 修改光颜色
			function lightColorfn() {
				let lightColorvalue = document.getElementById("lightColor").value
				console.log(lightColorvalue)
				console.log(directionalLight1)
				directionalLight1.color = {
					r: numfn(lightColorvalue.substr(1, 1), lightColorvalue.substr(2, 1)),
					g: numfn(lightColorvalue.substr(3, 1), lightColorvalue.substr(4, 1)),
					b: numfn(lightColorvalue.substr(5, 1), lightColorvalue.substr(6, 1)),
				}
				console.log(directionalLight1)
				render();
			}

			// 改变光的位置
			function lightfn() {
				if (lightchage) {
					lightchage = false
					let lightXvalue = document.getElementById("lightX").value
					let lightYvalue = document.getElementById("lightY").value
					let lightZvalue = document.getElementById("lightZ").value
					let lightIntensity = document.getElementById("lightIntensity").value
					directionalLight1.position.set(lightXvalue, lightYvalue, lightZvalue); // 光位置
					directionalLight1.intensity = lightIntensity;
					console.log(directionalLight1)
					setTimeout(function() {
						lightchage = true
					}, 100)
				}

			}

			// 切换显示光源设置
			function chageboxfn() {
				var lightul = document.getElementById("lightul")
				if (lightul.style.display == 'none') {
					lightul.style.display = 'block'
				} else {
					lightul.style.display = 'none'
				}
			}

			console.log(app)

			// 点击切换发型
			function hairstylefn(e) {
				e--
				for (var i = 0; i < hairstyle.length; i++) {
					hairstyle[i].obj.loaderRootNode.position.set(0, 0, -10000)
				}
				
				if(hairstyle[e]){
					var x = hairstyle[e].position[0]
					var y = hairstyle[e].position[1]
					var z = hairstyle[e].position[2]
					console.log(x,y,z)
					hairstyle[e].obj.loaderRootNode.position.set(x, y, z)

				}
			}
		</script>
	</body>
</html>
